<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/js/jquery-1.11.1.min.js"></script>
<link href="${APP_PATH}/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/js/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	
	<!-- 模态框：修改个人密码 -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">修改密码</h4>
	      </div>
	      <div class="modal-body">
	      	<form class="form-horizontal">
	      	  <!-- 登录名 -->
			  <div class="form-group">
			    <label for="empLoginName_update_form_static" class="col-sm-3 control-label">登陆名：</label>
			    <div class="col-sm-6">
			      <p class="form-control-static" id="empLoginName_update_form_static">阿斯达</p>
			    </div>
			  </div>
			  <!-- 原始密码 -->
			  <div class="form-group">
			    <label for="password_original_input" class="col-sm-3 control-label">原始密码 ：</label>
			    <div class="col-sm-6">
			      <input type="text" name="password"  class="form-control" id="password_original_input" placeholder="原始密码">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 新密码 -->
			  <div class="form-group">
			    <label for="password_new_input" class="col-sm-3 control-label">新密码：</label>
			    <div class="col-sm-6">
			      <input type="text" name="password1"  class="form-control" id="password_new_input" placeholder="新密码:6-16位字母数字组合">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <!-- 确认新密码 -->
			  <div class="form-group">
			    <label for="password_new2_input" class="col-sm-3 control-label">确认新密码：</label>
			    <div class="col-sm-6">
			      <input type="text" name="password2"  class="form-control" id="password_new2_input" placeholder="确认新密码:6-16位字母数字组合">
			      <span class="help-block"></span>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="password_update_btn">提交</button>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- 主页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h4>个人信息</h4>
			</div>
		</div>
		<p id="timeFresh" style="font-size: 10px;"></p>
		<hr/>
		<div class="row col-md-10 table-condensed">
			
			<table class="table">
				<tr>
					<td>员工姓名：</td>
					<td><p id="empRealName_update_static"></p></td>
					<td></td>
					<td>员工编号：</td>
					<td><p id="empId_update_static"></p></td>
					<td></td>
				</tr>
				<tr>
					<td>所在部门：</td>
					<td><p id="deptId_update_static"></p></td>
					<td></td>
					<td>当前状态：</td>
					<td><p id="state_update_static" ></p></td>
					<td></td>
				</tr>
				<tr>
					<td>系统角色：</td>
					<td><p id="roleId_update_static"></p></td>
					<td></td>
					<td>创建时间：</td>
					<td><p id="hireDate_update_static"></p></td>
					<td></td>
				</tr>
				<tr>
					<td>登陆名：</td>
					<td><p id="empLoginName_update_p"></p></td>
					<td><input type="button" id="empLoginName_update_btn" class="btn btn-warning btn-sm" value="修改"></td>
					<td>联系电话：</td>
					<td id="phone_update"><p id="phone_update_p"></p></td>
					<td><input type="button" id="phone_update_btn" class="btn btn-warning btn-sm" value="修改"></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="button" class="btn btn-warning" id="password_update_modal_btn" value="修改密码"></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
	</div>
	
	<script type="text/javascript">
		
		var statu_ename = 0;
		var statu_phone = 0;
		
		//页面加载时发送请求并在页面显示数据
		$(function(){
			getEmp();
		})
		
		//查询员工信息的方法
		function getEmp(){
			$.ajax({
				url:"${APP_PATH}/emp_message",
				type:'get',
				success:function(result){
					console.log(result);
					var empEle = result.extend.emp;
					$("#empRealName_update_static").text(empEle.empRealName);
					$("#empId_update_static").text(empEle.empId);
					$("#deptId_update_static").text(empEle.hyd.deptName);
					$("#state_update_static").text(empEle.state==0?'正常':'禁用');
					$("#roleId_update_static").text(empEle.hyr.roleName);
					$("#hireDate_update_static").text(empEle.hireDate);
					$("#empLoginName_update_p").text(empEle.empLoginName);
					$("#phone_update_p").text(empEle.phone);
					$("#empLoginName_update_form_static").text(empEle.empLoginName);
				}
			})
		}
		
		//修改登录名单击事件
		$("#empLoginName_update_btn").click(function(){
			if(statu_ename == 0){
				//获取<p>标签的值
				var value_p=$("#empLoginName_update_p").text();
				//改变按钮的显示字面为“保存”
				$("#empLoginName_update_btn").val("保存");
				//改变p标签为input标签
				$("#empLoginName_update_p").contents().unwrap().wrap('<input type="txt" id="ename_update_input" value="'+value_p+'">');
				//改变状态
				statu_ename = 1;
			}else{
				//获取input标签的值
				var value_input=$("#ename_update_input").val();
				$.ajax({
					url:"${APP_PATH}/emp_message",
					type:"put",
					data:{"loginName":value_input},
					success:function(result){
						console.log(result);
						$("#empLoginName_update_p").text(value_input);
					}
				})
				//改变按钮的显示字面为“修改”
				$("#empLoginName_update_btn").val("修改");
				
				//改变input标签为p标签并把input框的值给到p标签
				$("#ename_update_input").contents().unwrap().wrap('<p id="empLoginName_update_p"/>' + value_input);
				//改变状态
				statu_ename = 0;
			}
		})
		
		//修改电话单击事件
		$("#phone_update_btn").click(function(){
			if(statu_phone == 0){
				//获取<p>标签的值
				var value_p=$("#phone_update_p").text();
				//改变按钮的显示字面为“保存”
				$("#phone_update_btn").val("保存");
				//改变p标签为input标签
				$("#phone_update_p").contents().unwrap().wrap('<input type="txt" id="phone_update_input" value="'+value_p+'">');
				//改变状态
				statu_phone = 1;
			}else{
				//获取input标签的值
				var phone=$("#phone_update_input").val();
				$.ajax({
					url:"${APP_PATH}/emp_message",
					type:"put",
					data:{"phone":phone},
					success:function(result){
						console.log(result);
						$("#phone_update_p").text(phone);
					}
				})
				//改变按钮的显示字面为“修改”
				$("#phone_update_btn").val("修改");
				
				//改变input标签为p标签并把input框的值给到p标签
				$("#phone_update_input").contents().unwrap().wrap('<p id="phone_update_p"/>' + phone);
				//改变状态
				statu_phone = 0;
			}
		})
		
		//表单重置方法
		function reset_form(ele){
			//清空表单数据
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			//清空表单提示信息：<span>的class为help-block
			$(ele).find(".help-block").text("");
		}
		
		//封装提示信息为一个方法
		function show_validate_msg(ele,status,msg){
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			if("success" == status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}else if("error" == status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		
		//修改密码单击事件,弹出模态框
		$("#password_update_modal_btn").click(function(){
			//在模态框显示当前用户的登陆名
			getEmp();	
			//清空模态框数据及提示信息
			reset_form("#empUpdateModal form");
			//弹出模态框
			$("#empUpdateModal").modal({
				backdrop:"static"
			});
		})
		
		//验证原始密码是否正确的方法
		$("#password_original_input").change(function(){
			//获取输入的密码
			var password = this.value;
			//发送ajax请求查询当前密码并进行比对
			$.ajax({
				url:"${APP_PATH}/emp_password",
				type:"get",
				data:{"password":password},
				success:function(result){
					if(result.code == 100){
						show_validate_msg("#password_original_input","success","原始密码通过验证！");
						$("#password_update_btn").attr("ajax-va","success");
					}else{
						show_validate_msg("#password_original_input","error","原始密码不正确！");
						$("#password_update_btn").attr("ajax-va","error");
					}
				}
			})
			
		})
		
		//密码格式验证的方法
		function validate_password_regx(ele){
			//验证密码的正则表达式
			var regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
			//获取输入的新密码
			var password_new = $(ele).val();
			if(!regPassword.test(password_new)){
				show_validate_msg(ele,"error","密码格式不正确！");
				return false;
			}else{
				show_validate_msg(ele,"success","密码格式通过验证！");
				//通过格式验证的密码进行两次密码一致性的比对
			}
			return true;
		}
		
		//验证两次密码是否一致
		function validate_password_two(){
			//获取第一次输入的密码
			var password_new1 = $("#password_new_input").val();
			//获取第二次输入的密码
			var password_new2 = $("#password_new2_input").val();
			//两次密码比对
			if(password_new1 == password_new2){
				show_validate_msg("#password_new_input","success","密码一致，验证通过！");
				show_validate_msg("#password_new2_input","success","密码一致，验证通过！");
			}else{
				show_validate_msg("#password_new_input","error","两次密码不一致，请重新输入！");
				show_validate_msg("#password_new2_input","error","两次密码不一致，请重新输入！");
				return false;
			}
			return true;
		}
		
		//修改密码模态框保存按钮单击事件
		$("#password_update_btn").click(function(){
			//验证原始密码是否正确
			if($(this).attr("ajax-va") == "error"){
				return false;
			}
			//验证新密码是否合法
			if(!validate_password_regx("#password_new_input")){
				return false;
			}
			if(!validate_password_regx("#password_new2_input")){
				return false;
			}
			//密码合法性验证完成后验证两次密码是否一致
			if(!validate_password_two()){
				return false;
			}
			//获取
			var password = $("#password_new_input").val();
			//发送ajax更新密码并返回登陆页面让用户重新登陆
			$.ajax({
				url:"${APP_PATH}/emp_message",
				type:"put",
				data:{"password":password},
				success:function(result){
					console.log(result+6565);
					if(result.code == 100){
						//关闭模态框
						$("#empUpdateModal").modal("hide");
						alert("密码修改成功！点击返回首页面重新登陆！");
						window.parent.location.href="../login.jsp";
					}else{
						alert("处理失败");
					}
				}
			})
			
		})
		
		/* 定时刷新 */
		$(function() {
			setInterval(flush, 1);
			function flush() {
				var mydate = new Date();
				var t = mydate.toLocaleString();
				$("#timeFresh").text(t);
			}
		});
	
	</script>
	

</body>
</html>